<template>
  <div id="login"  @keyup.enter="adminLogin">
    <div class="login_bg" :style="{'background-image':`url(${this.back})`}"></div>
    <div class="bg_cover"></div>
    <div  class="login_body">
      <h3>众众管理系统</h3>
      <el-form ref="form" :model="admin" label-width="80px">
        <el-form-item label="用户名">
          <el-input placeholder="请输入用户名"  v-model="admin.username"></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input placeholder="请输入密码" show-password v-model="admin.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="adminLogin">登录</el-button>
          <el-button @click="adminRegister">没有账号? 前往注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {adminLogin} from "../network/admin";

export default {
  name: "login",
  component:{
  },
  data(){
    return{
      admin:{
        username: '',
        password: '',
      },
      bgList:[
        'https://oss.yhuayi.com/sixth-qianfeng/front/bg1.jpg',
        'https://oss.yhuayi.com/sixth-qianfeng/front/bg2.jpg',
        'https://oss.yhuayi.com/sixth-qianfeng/front/bg3.jpg',
        'https://oss.yhuayi.com/sixth-qianfeng/front/bg4.jpg',
        'https://oss.yhuayi.com/sixth-qianfeng/front/bg5.jpg',
        `https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg`,
      ],
      back:"",
    }
  },
  methods:{
    adminLogin(){
      // this.$router.push(`/admin/page/${123}`)
      adminLogin(this.admin).then((result)=>{
        // console.log(result);
        if (result.data.code===200){
          this.$message.success('登录成功!');
          const username=result.data.data.username;
          const adminIcon=result.data.data.adminIcon;
          this.$store.commit("updateUserName",username);
          this.$store.commit("updateadminIcon",adminIcon);
          this.$store.commit('updateCurrentAdmin',result.data.data);

          //存储session
          window.sessionStorage.setItem('currentUsername',username);
          // 存储token
          localStorage.setItem('token',username);
          if (this.$route.query.redirect){
            let redirect=this.$route.query.redirect;
            this.$router.push(redirect);
          }else{
            this.$router.push({name:"Main"});
          }

          this.$router.push(`admin/page/member`);
        }else{
          this.$message.error(result.data.message);
        }


      }).catch((reason)=>{
        console.log(reason);
        if (reason){
          this.$message.error('网络连接超时,请稍后重试...');
        }
      })
    },
    adminRegister(){//前往注册
      this.$router.push('/register');
    }
  },
  created() {
    // console.log(Math.random()*10);
    this.back=this.bgList[Math.round(Math.random() * this.bgList.length)];//随机背景
  }
}
</script>

<style scoped>
#login{
  position: relative;
  width: 100%;
  height: 100vh;
}
.login_bg{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100vh;

  background-size: 100% 100%;
  filter: blur(2px);
}
.bg_cover{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,.3);
  /*background: rgba(255,255,255,.2);*/
}

/*登录的身体*/
.login_body{
  position: relative;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translateY(-70%) translateX(-55%);
  width: 500px;
  height: 300px;
  padding: 20px 30px;
}

.login_body h3{
  text-align: center;
  line-height: 80px;
  font-size: 36px;
  font-family: '苏新诗柳楷简';
  color: white;
}

</style>
